<template>
    <div style="width: 100%;margin: 10px;">
        <table class="table">
            <caption class="caption">{{ title }}</caption>
            <thead class="thead">
                <tr>
                    <th v-for="(item, index ) in theads" :key="index">{{ item }}</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr v-for="(item, index ) in pageDatas" :key="index">
                    <td v-for="(i, index ) in item" :key="index" v-html="i"></td>
                </tr>
            </tbody>
            <tfoot>
                <td></td>
                <td></td>
            </tfoot>
        </table>
        <pagination style="left: auto;" 
        :total="totals" 
        :pageSize="5" 
        :courrentPage="courrentPage"
        @currentChange="currentChange"
        ></pagination>
    </div>
</template>

<script>
import pagination from './pagination.vue'
export default {
    name: 'utable',
    components: { pagination },
    props: {
        title: {
            type: String,
            default: ''
        },
        datas: {
            type: Array,
            default: []
        },
        theads: {
            type: Array,
            default: []
        },
        pageSize: {
            type: Number,
            default: 5
        },
        courrentPage: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
           
        }
    },
    computed: {
        totals() {
            return this.datas.length;
        },
        pageDatas(){
            return this.datas.slice(this.courrentPage*(this.pageSize), this.pageSize+this.courrentPage*(this.pageSize));
        }
    },
    methods: {
        currentChange(val) {
            this.courrentPage = val;
        }
    }
}
</script>

<style scoped>
.caption {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    background-color: skyblue;
    color: white;
}
.table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

.thead tr th {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.tbody tr:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.tbody tr:hover {
    background-color: skyblue;
}

.tbody td {
    padding: 10px;
    min-width: 100px;
}
</style>